<template>
    <div id="branddetail">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="item">
                <div class="banner">
                    <img
                        src="http://yanxuan.nosdn.127.net/1541445967645114dd75f6b0edc4762d.png"
                        alt
                    />
                    <div class="info">
                        <span>{{detailData.name}}</span>
                    </div>
                </div>
                <div class="info-desc">{{detailData.simple_desc}}</div>
                <div class="sortlist" v-if="goodsList.length!=0">
                    <div class="sitem" v-for="(item,index) in goodsList" :key="index">
                        <img :src="item.list_pic_url" alt />
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.retail_price}}</p>
                    </div>
                </div>
                <div class="none" v-else>
                    数据库暂无数据
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { detailaction, listaction } from "@/api/brand";
export default {
    data() {
        return {
            id: "",
            detailData: {},
            goodsList: [],
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        console.log(this.id);
        this.getDetails();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getDetails() {
            const data = await detailaction({ id: this.id });
            console.log(data);
            this.detailData = data.data;
            console.log(this.detailData);
            this.goodsList = data.goodsList;
            console.log(this.goodsList);
        },
    },
};
</script>
<style lang="scss" scoped>
#branddetail {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        height: calc(100% - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .item {
            .banner {
                width: 100%;
                height: 3.86667rem;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                }
                .info {
                    text-align: center;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate3d(-50%, -50%, 0);
                    span {
                        font-size: 0.50667rem;
                        color: #fff;
                        border-bottom: 0.06667rem solid #fff;
                        padding: 0.06667rem;
                    }
                }
            }
            .info-desc {
                background: #fff;
                padding: 0.56rem 0.42667rem;
                font-size: 0.4rem;
                color: #666;
                text-align: center;
            }
            .sortlist {
                margin-top: 0.26667rem;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .sitem {
                    width: 4.96667rem;
                    margin-bottom: 0.06667rem;
                    text-align: center;
                    background: #fff;
                    padding: 0.2rem 0;
                    img {
                        display: block;
                        width: 4.02667rem;
                        height: 4.02667rem;
                        margin: 0 auto;
                    }
                    .name {
                        margin: 0.2rem 0 0.29333rem 0;
                        text-align: center;
                        padding: 0 0.26667rem;
                        font-size: 0.32rem;
                    }
                    .price {
                        text-align: center;
                        font-size: 0.4rem;
                        color: #b4282d;
                    }
                }
            }
            .none {
                text-align: center;
                color: #999;
                font-size: 0.42667rem;
                margin-top: 2.66667rem;
            }
        }
    }
}
</style>